<!DOCTYPE html>
<html lang="en" data-framework="typescript">

<head>
  <meta charset="utf-8">
  <title>
    <%- htmlWebpackPlugin.options.metadata.title %>
  </title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <base href="<%- htmlWebpackPlugin.options.metadata.baseUrl %>">
  <link rel="shortcut icon" type="image/png" href="/favicon.ico" />
  <!-- imported CSS are concatenated and added automatically -->
</head>

<body>


  <!--[if lt IE 11]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
    your browser</a> to improve your experience.</p>
<![endif]-->

  <div id="loading">
    <style type="text/css">
      html {
        position: relative;
        font-family: sans-serif;
        -ms-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
      }

      html,
      body {
        height: 100%;
        width: 100%;
        padding: 0;
        margin: 0;
      }

      #loading {
        position: fixed;
        font-family: sans-serif;
        width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .splash {
        text-align: center;
        margin: 10% 0 0 0;
        box-sizing: border-box;
      }

      .splash .message {
        font-size: 72px;
        line-height: 72px;
        text-shadow: rgba(0, 0, 0, 0.5) 0 0 15px;
        text-transform: uppercase;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      }

      .loader {
        position: relative;
        margin: 0px auto;
        width: 64px;
        height: 64px;
      }

      .loader:before {
        content: "";
        display: block;
        padding-top: 100%;
      }

      .circular-loader {
        -webkit-animation: rotate 2s linear infinite;
        animation: rotate 2s linear infinite;
        height: 100%;
        -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
        transform-origin: center center;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        margin: auto;
      }

      .loader-path {
        stroke-dasharray: 150, 200;
        stroke-dashoffset: -10;
        -webkit-animation: dash 1.5s ease-in-out infinite;
        animation: dash 1.5s ease-in-out infinite;
        stroke-linecap: round;
      }

      @keyframes rotate {
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }

      @keyframes dash {
        0% {
          stroke-dasharray: 1, 200;
          stroke-dashoffset: 0;
        }

        50% {
          stroke-dasharray: 89, 200;
          stroke-dashoffset: -35;
        }

        100% {
          stroke-dasharray: 89, 200;
          stroke-dashoffset: -124;
        }
      }

      .m-fadeOut {
        visibility: hidden;
        opacity: 0;
        transition: visibility 0s linear 300ms, opacity 300ms;
      }
    </style>
    <div id="initializing">
      <div class="splash">
        <div class="message">
          <%- htmlWebpackPlugin.options.metadata.title %>
        </div>

        <div class="loader">
          <svg class="circular-loader" viewBox="25 25 50 50">
            <circle class="loader-path" cx="50" cy="50" r="20" fill="none" stroke="#000" stroke-width="4" />
          </svg>
        </div>
      </div>
    </div>
  </div>
  <div id="application">
  </div>
  <footer class="info">
    <p>Double-click to edit a todo</p>
    <p>Created by <a href="http://github.com/volak/">Charles Solar</a></p>
    <p>Not-officially part of <a href="http://todomvc.com">TodoMVC</a></p>
  </footer>
  <!--[if IE]>
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=Promise"></script>
<![endif]-->
</body>

</html>